<template>
  <AppHeader />

  <div class="films-container">
    <!-- 电影分类标签 -->
    <div class="category-tabs">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        :class="['tab-item', { active: currentTab === tab.id }]"
        @click="currentTab = tab.id"
      >
        {{ tab.name }}
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <div class="filter-row" v-for="filter in filters" :key="filter.name">
        <span class="filter-label">{{ filter.label }}:</span>
        <div class="filter-options">
          <span
            v-for="option in filter.options"
            :key="option.value"
            :class="['filter-option', { active: filter.selected === option.value }]"
            @click="updateFilter(filter.name, option.value)"
          >
            {{ option.label }}
          </span>
        </div>
      </div>
    </div>

    <!-- 电影列表 -->
    <div class="films-list">
      <div v-if="loading" class="loading">加载中...</div>
      <template v-else>
        <div class="film-card" v-for="film in films" :key="film.id" @click="goToFilmDetail(film.id)">
          <div class="poster">
            <img :src="BASE_URL + film.posterUrl" :alt="film.movieName">
            <div class="score" v-if="film.score">
              {{ film.score }}分
            </div>
          </div>
          <div class="info">
            <h3 class="title">{{ film.movieName }}</h3>
            <div class="wish" v-if="film.wishCount">
              {{ film.wishCount }}人想看
            </div>
            <div class="date" v-if="film.releaseDate">
              {{ film.releaseYearDate }}上映
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 分页 -->
    <div class="pagination" v-if="total > 0">
      <button
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import AppHeader from '@/components/AppHeader.vue'
import { useRouter, useRoute } from 'vue-router'
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const router = useRouter()
const route = useRoute()

// 标签页配置
const tabs = [
  { id: 'showing', name: '正在热映' },
  { id: 'coming', name: '即将上映' }
]

// 筛选条件配置
const filters = ref([
  {
    name: 'category',
    label: '类型',
    selected: '',
    options: [
      { label: '全部', value: '' },
      { label: '恐怖', value: 10 },
      { label: '动作', value: 20 },
      { label: '悬疑', value: 30 },
      { label: '科幻', value: 40 },
      { label: '动画', value: 50 }
    ]
  },
  {
    name: 'region',
    label: '地区',
    selected: '',
    options: [
      { label: '全部', value: '' },
      { label: '中国', value: '中国' },
      { label: '美国', value: '美国' },
      { label: '韩国', value: '韩国' },
      { label: '日本', value: '日本' }
    ]
  },
  {
    name: 'year',
    label: '年份',
    selected: 'all',
    options: [
      { label: '全部', value: 'all' },
      { label: '2024', value: '2024' },
      { label: '2023', value: '2023' },
      { label: '2022', value: '2022' }
    ]
  }
])

const currentTab = ref('showing')
const loading = ref(false)
const films = ref([])
const currentPage = ref(1)
const total = ref(0)
const totalPages = ref(1)

// 刷新页面的方法
const refreshPage = () => {
  currentPage.value = 1
  fetchFilms()
}



// 更新筛选条件
const updateFilter = (filterName, value) => {
  const filter = filters.value.find(f => f.name === filterName)
  if (filter) {
    filter.selected = value
    currentPage.value = 1 // 重置页码
    fetchFilms() // 重新获取数据
  }
}

// 切换页码
const changePage = (page) => {
  currentPage.value = page
  fetchFilms()
}

//保存电影筛选数据
const saveMovie = ref({
  genre: '',
  country:'',
  releaseYearDate:''
})

// 获取电影数据
const fetchFilms = async () => {
  saveMovie.value.genre = filters.value.find(f => f.name === 'category').selected
  saveMovie.value.country = filters.value.find(f => f.name === 'region').selected
  saveMovie.value.releaseYearDate = filters.value.find(f => f.name === 'year').selected
  let data = qs.stringify(saveMovie.value)
  await axios.get(BASE_URL+'/v1/movie/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      films.value = response.data.data.list;
      total.value = films.value.length;
      totalPages.value = Math.ceil(total.value / 20);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

// 监听标签页变化
watch(currentTab, () => {
  currentPage.value = 1
  fetchFilms()
})

// 在 onMounted 中添加路由参数处理
onMounted(() => {
  // 从路由参数中恢复状态
  if (route.query.tab) {
    currentTab.value = route.query.tab
  }

  filters.value.forEach(filter => {
    if (route.query[filter.name]) {
      filter.selected = route.query[filter.name]
    }
  })

  if (route.query.page) {
    currentPage.value = parseInt(route.query.page)
  }

  fetchFilms()
})

// 添加跳转到电影详情的方法
const goToFilmDetail = (filmId) => {
  router.push({
    path: `/movieDetail/${filmId}`
  })
}
</script>

<style scoped>
.films-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.category-tabs {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 15px;
}

.tab-item {
  font-size: 18px;
  cursor: pointer;
  padding: 0 10px;
  position: relative;
}

.tab-item.active {
  color: #ff5f16;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff5f16;
}

.filter-section {
  margin-bottom: 30px;
}

.filter-row {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
}

.filter-label {
  width: 80px;
  color: #666;
}

.filter-options {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-option {
  cursor: pointer;
  padding: 0 10px;
}

.filter-option:hover {
  color: #ff5f16;
}

.filter-option.active {
  color: #ff5f16;
  font-weight: 500;
}

.films-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.film-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.film-card:hover {
  transform: translateY(-5px);
}

.poster {
  position: relative;
  aspect-ratio: 2/3;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.score {
  position: absolute;
  right: 8px;
  top: 8px;
  background: rgba(255, 95, 22, 0.8);
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.info {
  padding: 10px 0;
}

.title {
  font-size: 16px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wish, .date {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-top: 40px;
}

.pagination button {
  padding: 8px 15px;
  border: 1px solid #e5e5e5;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination button:not(:disabled):hover {
  background: #f5f5f5;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: #666;
}

@media (max-width: 768px) {
  .films-container {
    padding: 10px;
  }

  .category-tabs {
    gap: 20px;
  }

  .filter-row {
    flex-direction: column;
  }

  .filter-label {
    width: 100%;
    margin-bottom: 10px;
  }

  .films-list {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
  }
}
</style>